<template>
  <view class="cs-card">
    <uni-card>
      <template v-slot:title>
        <uni-list>
          <uni-list-item :title="curTypeData.title">
            <template v-slot:footer>
              <TnButton type="primary" shape="round" :custom-style="btnStyle" @click="changeDataType">{{
                curTypeData.extra }}</TnButton>
            </template>
          </uni-list-item>
        </uni-list>
      </template>
      <view class="uni-body">
        <uni-row>
          <TnCountScroll :value="curTypeData.count" decimal-separator="." thousands-separator="," />
        </uni-row>

        <uni-row class="add-container">
          <view class="centered">
            <TnButton type="primary" shape="round" :custom-style="addBtnStyle" @click="addNew">{{ curTypeData.addNew }}
            </TnButton>
          </view>
        </uni-row>
      </view>
    </uni-card>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, watch, type CSSProperties, reactive } from "vue";
import { has } from "lodash";
import TnCountScroll from "@tuniao/tnui-vue3-uniapp/components/count-scroll/src/count-scroll.vue";
import TnButton from "@tuniao/tnui-vue3-uniapp/components/button/src/button.vue";

const btnStyle: CSSProperties = {
  fontSize: "12px",
};

const addBtnStyle: CSSProperties = {
  width: "80VW",
};

const { dataType = "bill" } = defineProps<{
  dataType?: "bill" | "assets";
  data?: {
    title: string;
    count: number;
  };
}>();

defineEmits<{
  click: [type: "title" | "content"];
}>();

const curDataType = ref(dataType);

const curData = reactive({
  bill: {
    title: "本月支出(元)",
    count: 300,
    extra: "资产",
    addNew: "记一笔",
  },
  assets: {
    title: "净资产(元)",
    count: 0,
    extra: "账单",
    addNew: "添加资产",
  },
});

const curTypeData = computed(() => curData[curDataType.value]);

const changeDataType = () => {
  curDataType.value = curDataType.value === "bill" ? "assets" : "bill";
};

const addNew = () => {
  console.log("add new");
  uni.navigateTo({
    url: "/pages/add-bill/index",
  });
};

watch(curDataType, (newDataType) => { });

console.log("Init", curDataType)
</script>

<style scoped lang="scss">
$cs-card-margin: 15px;
$cs-card-padding: 0 10px;

.cs-card {
  width: 80vw;
}

.add-container {
  margin-top: 10px;
}

.centered {
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
</style>
